// 全局配置
var storageName = 'verification-code'

// 获取随机颜色
function getColor() {
  return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
}

// 获取随机数
function getRandom(a, b=0) {
  var max = a;
  var min = b;
  if(a < b){
    max = b;
    min = a;
  }
  return Math.floor(Math.random()*(max-min)) + min
}

// 设置cookie
function setCookie(key,value,seconds,path='/') {
  var date = new Date()
  date.setTime(date.getTime()-8*3600*1000 + seconds*1000)
  document.cookie = `${key}=${value};expires=${date};path=${path}`
}

// 获取cookie
function getCookie(key, ath='/'){
  var cookiesArr = document.cookie.split('; ')
  for(var i=0; i<cookiesArr.length; i++){
    var brr = cookiesArr[i].split('=')
    if(brr[0] === key){
      return brr[1]
    }
  }
}

// 设置sessionStorage
function setSessionStorage (key, value) {
  window.sessionStorage.setItem(key, value)
}

// 获取sessionStorage
function getSessionStorage (key) {
  return window.sessionStorage.getItem(key)
}

// 设置验证码 - 参数为canvas标签的节点对象
function getCode(ele, num=4) {
  // 定义工具箱
  var ctx = ele.getContext('2d')
  // 获取画布宽和高
  var width = ctx.canvas.width
  var height = ctx.canvas.height
  // 设置线段宽度
  ctx.lineWidth = 2
  // 循环创建点
  for(var i=0; i<100; i++){
      // 开启路径
      ctx.beginPath()
      // 设置随机点的开始位置
      var x = getRandom(width - 2)
      var y = getRandom(height - 2)
      // 画点 - 将画笔放到开始位置
      ctx.moveTo(x, y)
      // 将画笔移动到1px后
      ctx.lineTo(x + 1, y + 1)
      // 填充颜色
      ctx.strokeStyle = getColor()
      ctx.stroke()
  }
  // 随机线
  for(var i=0; i<0; i++){
    // 开启路径
    ctx.beginPath()
    // 设置随机的开始位置
    var x = getRandom(width - 1)
    var y = getRandom(height - 1)
    // 设置随机的宽和高
    var w = getRandom(width - x)
    var h = getRandom(height - y)
    // 将画笔放到开始位置
    ctx.moveTo(x, y)
    // 将画笔移动到 开始位置+随机宽
    ctx.lineTo(x + w, y + h)
    // 填充随机颜色
    ctx.strokeStyle = getColor()
    ctx.stroke()
  }
  // 字符容器
  var strContainer = '1234567890';
  // 设置文字大小
  ctx.font = width/5 + 'px Arial';
  // 设置文字垂直对齐方式
  ctx.textBaseline = 'middle';
  // 验证码字符串
  var str = '';
  // 遍历生成字符放在画布中
  for(var i=0; i<num; i++){
    // 开启路径
    ctx.beginPath()
    // 描边文字颜色
    ctx.fillStyle = getColor()
    // 随机字符
    var word = strContainer[getRandom(strContainer.length)]
    // 设置每个文字所处的区域大小
    var w = width / num;
    // 定义文字left和top
    var left = getRandom(i*w, (i+1)*w-width/5)
    var top = getRandom(height / 2 - 10, height / 2 + 10)
    // 写文字
    ctx.fillText(word, left, top);
    // 将所有字符存起来
    str += word
  }
  // 将验证码字符串存在cookie中
  // setCookie('code', str, 10)
  setSessionStorage(storageName, window.btoa(str))
}

// 刷新验证码 - 参数为canvas标签的节点对象
function flush(ele){
  // 重新获取工具箱
  var ctx = ele.getContext('2d')
  // 获取画布大小
  var width = ctx.canvas.width
  var height = ctx.canvas.height
  // 将画布中内容清空
  ctx.clearRect(0, 0, width, height)
  // 重新生成验证码
  getCode(ele)
}

// 校验验证码 - 参数为被验证的字符串 - 返回布尔值
function verify(str){
  // 从cookie中获取验证码字符串
  // var codeWord = getCookie('code').toLowerCase()
  var codeWord = window.atob(getSessionStorage(storageName)).toLowerCase()
  // 对比
  if(str.toLowerCase() === codeWord){
      return true
  }else{
      return false;
  }
}